<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item  :label="$t('m.eform.apptemplate.entity.tempName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'tempName', validatorRules.tempName]" placeholder=""></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item  :label="$t('m.eform.apptemplate.entity.tempCode')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'tempCode', validatorRules.tempCode]" placeholder=""></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item  :label="$t('m.eform.apptemplate.entity.tempType')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['tempType', validatorRules.tempType]" placeholder=""
                        @change="changeTempType">
                <a-select-option v-for="item in tempType" :key="item.value" :value="item.value">
                  {{item.text}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item  :label="$t('m.eform.apptemplate.entity.tempStructure')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['tempStructure', validatorRules.tempStructure]" placeholder="">
                <a-select-option v-for="item in tempStructure" :key="item.value" :value="item.value">
                  {{item.text}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item  :label="$t('m.eform.apptemplate.entity.tempDesc')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-input v-decorator="[ 'tempDesc', validatorRules.tempDesc]" placeholder=""></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="tempTypeModel == 'form' || tempTypeModel == 'view'">
          <a-col :span="12">
            <a-form-item  :label="$t('m.eform.apptemplate.entity.tempType')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['appType', validatorRules.appType]" placeholder="">
                <a-select-option v-for="item in appType" :key="item.value" :value="item.value">
                  {{item.text}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!--<a-col :span="12">
            <a-form-item label="可否编辑" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group name="editAble" v-decorator="['editAble', validatorRules.editAble]">
                <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{item.text}}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>-->
        </a-row>
        <a-row v-show="tempTypeModel == 'form' || tempTypeModel == 'view'">
          <a-col :span="24">
            <a-form-item  :label="$t('m.eform.apptemplate.entity.tempBodyString')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <ych-code-editor
                v-decorator="['tempBodyString', validatorRules.tempBodyString]"
                language="htmlmixed"
                :fullScreen="true"
                placeholder=""
                style="min-height: 100px"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button v-if="tempTypeModel === 'view'" key="preview" @click="handleOpenPreviewModal">{{$t('m.common.button.preview')}}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
    </template>

    <view-template-preview ref="preview"></view-template-preview>
  </ych-modal>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { EFormConstant } from '../EFormConstant'
  import YchConstant from "@/api/YchConstant";
  import {YchCodeEditor} from '@yuncheng/ych-components'
  import { duplicateCheck } from '@/api/api'
  import ViewTemplatePreview from './actAppView/ViewTemplatePreview'

  export default {
    name: 'ActAppTemplateModal',
    components:{
      YchCodeEditor,
      ViewTemplatePreview,
    },
    data () {
      return {
        form: this.$form.createForm(this),
        title: this.$t('m.common.label.operate'),
        visible: false,
        model: {},
        tempTypeModel: null,
        tempStructure: EFormConstant.objStructure,
        appType: EFormConstant.appType,
        tempType: EFormConstant.tempType,
        yesNo_text: EFormConstant.yesNo_text,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        confirmLoading: false,
        validatorRules: {
          tempName: { rules: [{ required: true, message: this.$t('m.eform.apptemplate.verify.formName') },{ validator: this.checkTempName }] },
          tempCode: { rules: [{ required: true, message: this.$t('m.eform.apptemplate.verify.tempCode') }, { validator: this.checkCode }] },
          tempBodyString: {},
          tempType: {
            initialValue: 'form'
          },
          appType: {
            initialValue: 'pc'
          },
          tempStructure: {
            initialValue: 'main'
          },
          tempDesc: {}
        },
        url: {
          add: YchConstant.PREFIX_EFORM + '/manage/actAppTemplate/add',
          edit: YchConstant.PREFIX_EFORM + '/manage/actAppTemplate/edit',
          checkCode: YchConstant.PREFIX_EFORM + '/manage/actAppTemplate/checkCode',
        }
      }
    },
    methods: {
      add () {
        this.edit({})
      },
      edit (record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.tempTypeModel = this.model.tempType || 'form'
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(this.lodash.pick(this.model, 'tempName', 'tempCode', 'tempType', 'appType', 'tempStructure', 'tempDesc', 'tempBodyString'))
        })
      },
      changeTempType (value) {
        this.tempTypeModel = value
      },
      close () {
        this.$emit('close')
        this.visible = false
      },
      handleOk () {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.messageUtil.success(res.message)
                that.$emit('ok')
              } else {
                that.messageUtil.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }

        })
      },
      handleCancel () {
        this.close()
      },
      checkCode (rule, value, callback) {
        if (!value) {
          callback()
          return
        }
        getAction(this.url.checkCode, {
          value: value,
          id: this.model.id
        }).then((res) => {
          res.success ? callback() : callback(res.message)
        })
      },
      checkTempName(rule, value, callback) {
        let params = {
          tableName: 'act_app_template',
          fieldName: 'temp_name',
          fieldVal: value,
          dataId: this.model.id
        }
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(this.$t('m.eform.apptemplate.verify.formName_repeat'))
          }
        })
      },
      handleOpenPreviewModal() {
        const tempBodyString = this.form.getFieldValue('tempBodyString')
        this.$refs.preview.open(tempBodyString)
      }
    }
  }
</script>
